---
metaTitle: How to use Radix Colors
metaDescription: How to use Radix Colors.
---

# Usage

<Description>
	How to use Radix Colors with various styling solutions.
</Description>

Radix Colors scales are just simple JavaScript objects, so you can use them with your preferred styling solution easily. Below you can find usage examples for popular styling solutions.

## Vanilla CSS

Radix Colors provides the colors bundled as raw CSS files. You can import them directly in your files when using a bundler, such as Parcel or Webpack.

```css
/* Import only the scales you need */
@import "@radix-ui/colors/gray.css";
@import "@radix-ui/colors/blue.css";
@import "@radix-ui/colors/green.css";
@import "@radix-ui/colors/red.css";
@import "@radix-ui/colors/gray-dark.css";
@import "@radix-ui/colors/blue-dark.css";
@import "@radix-ui/colors/green-dark.css";
@import "@radix-ui/colors/red-dark.css";

/* Use the colors as CSS variables */
.button {
	background-color: var(--blue-4);
	color: var(--blue-11);
	border-color: var(--blue-7);
}
.button:hover {
	background-color: var(--blue-5);
	border-color: var(--blue-8);
}
```

```html
<!-- For dark mode, apply a `.dark` class to <body> or a parent. -->
<body class="dark">
	<button class="button">Button</button>
</body>
```

<Note>
	Light scales apply their CSS variables to the `:root` element and to the
	`.light` and `.light-theme` classes. Dark scales apply their CSS variables to
	the `.dark` and `.dark-theme` classes.
</Note>

## styled-components

```js
import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import styled, { ThemeProvider } from "styled-components";

// Create your theme
const theme = {
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
};

// Create your dark theme
const darkTheme = {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
};

// Use the colors in your styles
const Button = styled.button`
	background-color: ${(props) => props.theme.colors.blue4};
	color: ${(props) => props.theme.colors.blue11};
	border-color: ${(props) => props.theme.colors.blue7};
	&:hover {
		background-color: ${(props) => props.theme.colors.blue5};
		border-color: ${(props) => props.theme.colors.blue8};
	}
`;

// Wrap your app with the theme provider and apply your theme to it
export default function App() {
	return (
		<ThemeProvider theme={theme}>
			<Button>Radix Colors</Button>
		</ThemeProvider>
	);
}
```

## emotion

Usage with emotion is almost identical to the styled-components docs above, aside from the different imports.

```js
import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { ThemeProvider } from "@emotion/react";
import styled from "@emotion/styled";
```

## vanilla-extract

```js
import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
});

export const darkTheme = createTheme(vars, {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
});

// Use the colors in your styles
export const styles = {
	button: style({
		backgroundColor: vars.colors.blue4,
		color: vars.colors.blue11,
		borderColor: vars.colors.blue7,
		":hover": {
			backgroundColor: vars.colors.blue5,
			borderColor: vars.colors.blue8,
		},
	}),
};

// Apply your theme to it
export default function App() {
	return (
		<body className={theme}>
			<button className={styles.button}>Radix Colors</button>
		</body>
	);
}
```
